<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font2/iconfont.css">
    <link rel="stylesheet" href="../css/shoppingCar.css">
    <link rel="stylesheet" href="../css/com.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/interface.js"></script>
</head>

<body>
    <!-- 头部公共部分 -->
    <div class="s-header">
        <div class="header-wrap">
            <div class="header-l">
                <ul class="nav-l">
                    <li class="nl-li"><a href="">帮助中心</a></li>
                    <li class="nl-li"><a href="">收藏</a></li>
                    <li class="nl-li"><a href="">360官网</a></li>
                    <li class="nl-li"><a href="">360智慧生活</a></li>
                </ul>
            </div>
            <div class="header-r">
                <div class="nav-r">
                    <div class="tips nr-li">
                        <a href="./login.html">登录</a>
                        <a href="./reg.html">注册</a>
                    </div>
                    <div class="nr-li"><a href="./shoppingcar.html"><span class="iconfont icon-shangpin"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navwrap">
        <div class="navwrapper">
            <div class="navsearch-l">
                <div class="navlist"><img class="logo" src="../images/logo.png" alt=""><span>购物车</span></div>

            </div>
        </div>

        <!-- 内容 -->
        <div class="contentWrap">
            <table class="tableCar">
                <thead>
                    <tr>
                        <td>
                            <label>
                                <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label>
                        </td>
                        <td>商品</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody class="tableList">
                    <!-- <tr data-id="1">
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                        <td class="price">5999.88</td>
                        <td class="count">
                            <div class="mod-modifier">
                                <span class="reduce">-</span>
                                <input class="count-input" type="text" value="1" />
                                <span class="add">+</span>
                            </div>

                        </td>
                        <td class="subtotal">5999.88</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr>
                    <tr data-id="1">
                        <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                        <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                        <td class="price">5999.88</td>
                        <td class="count">
                            <div class="mod-modifier">
                                <span class="reduce">-</span>
                                <input class="count-input" type="text" value="1" />
                                <span class="add">+</span>
                            </div>

                        </td>
                        <td class="subtotal">5999.88</td>
                        <td class="operation"><span class="delete">删除</span></td>
                    </tr> -->
                </tbody>
            </table>
            <div class="stat">

                <a class="fl" id="deleteAll" href="javascript:;">删除选中商品</a>
                <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件</div>
                <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
                <div class="fr closing" onclick="getTotal();">结 算</div>

            </div>
        </div>

        <!-- 底部公共部分 -->
        <div class="footerWrap">
            <div class="footer-top">
                <div class="ftWrap">
                    <div class="aboutbox">
                        <p class="helpTitle">关于商城</p>
                        <p class="helpText">
                            360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。
                        </p>
                    </div>
                    <div class="linkbox">
                        <p class="helpTitle">售后服务</p>
                        <a href="">7日无理由退货 </a>
                        <a href="">质量问题15日内换货 </a>
                        <a href="">保修条款 </a>
                        <a href="">服务流程 </a>
                        <a href="">许可协议 </a>
                        <a href="">隐私政策 </a>

                    </div>
                    <div class="linkbox">
                        <p class="helpTitle">帮助中心</p>
                        <a href="">用户注册 </a>
                        <a href="">会员说明 </a>
                        <a href="">登录与密码找回 </a>
                        <a href="">购买指南 </a>
                        <a href="">支付方式 </a>
                        <a href="">配送与说明 </a>
                    </div>
                    <div class="contentbox">
                        <p class="helpTitle">联系我们</p>
                        <p class="bigText">400-6822-360</p>
                        <p class="smallText">周一至周日 9:00-18:00（仅收市话费）</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="fbWrap">
                    <div class="fbtBox">
                        <a href=""><span class="iconfont icon-fanhui"></span> 7天无理由退货 </a>
                        <a href=""><span class="iconfont icon-double-arrows"></span> 15天免费换货 </a>
                        <a href=""><span class="iconfont icon-shangpin1
                        "></span> 满99元包邮 </a>
                    </div>
                    <div class="fbBbox">
                        <p class="fb-top"> ©2019-2021 mall.360.cn版权所有 </p>
                        <p class="fb-center">京ICP备08010314号-6 营业执照 </p>
                        <div class="fb-bottom">公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证<br>
                            公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360</div>
                    </div>
                </div>
            </div>
        </div>
</body>

<script>
    $(function () {
        var account = getCookie("lgc");
        console.log(account);
        if (account) {
            $(".tips").html(`欢迎您,${account} <button style="font-size: 12px" onclick="exit()">退出</button>`).css({ "color": "#fff", fontSize: "12px" });
        }

        loadshopCar();//页面自动加载
        async function loadshopCar() {
            var { status, detail, list } = await searchShoppingCarByUser({ account });
            if (status) {
                var html = "";
                list.forEach(({ id, gId, goodsName, goodsImg, goodsPrice, buyNum, total }) => {
                    html += `<tr data-id="${id}">
                            <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                            <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span></td>
                            <td class="price">${goodsPrice}</td>
                            <td class="count">
                                <div class="mod-modifier">
                                    <span class="reduce" style="user-select:none"></span>
                                    <input class="count-input" type="text" value="${buyNum}" />
                                    <span class="add" style="user-select:none">+</span>
                                </div>
    
                            </td>
                            <td class="subtotal">${total}</td>
                            <td class="operation"><span class="delete">删除</span></td>
                        </tr>`;
                })
                $(".tableList").html(html);

                $(".add").click(function () {//点击加号的同时就通过ID向后台更新数据
                    var id = $(this).parents("tr").attr("data-id");
                    var type = 1;
                    console.log(id);

                    var num = $(this).prev().val();
                    num++;
                    $(this).prev().val(num);
                    var price = $(this).parents("tr").find(".price").text();
                    $(this).parents("tr").find(".subtotal").text((num * price).toFixed(2));
                    $(this).prevAll(".reduce").text("-");
                    console.log(num, price);
                    getTotal();
                    $.get("../php/updateShoppingCarById.php", { id, type }, function (result) {
                        var { status, detail } = result;
                        if (status) {
                            // loadshopCar();
                        } else {
                            alert(detail);
                        }
                    }, "json")
                });
                $(".reduce").click(function () {
                    var id = $(this).parents("tr").attr("data-id");
                    var type = 0;
                    console.log(id);
                    var num = $(this).next().val();
                    if (num <= 1) return false;
                    num--;
                    if (num == 1) $(this).text("");
                    $(this).next().val(num);
                    var price = $(this).parents("tr").find(".price").text();
                    $(this).parents("tr").find(".subtotal").text((num * price).toFixed(2));
                    getTotal();
                    $.get("../php/updateShoppingCarById.php", { id, type }, ({ status, detail }) => {
                        if (status) {
                            // loadshopCar();
                        } else {
                            alert(detail);
                        }
                    }, "json")
                })
                $(".check-all").click(function () {
                    var status = $(this).prop("checked");
                    $(".check-one").prop("checked", status);
                    getTotal();
                })
                $(".check-one").click(function () {
                    isAllChecked();
                    getTotal();
                })
                $(".delete").click(async function () {
                    if (confirm("确认删除选中商品？")) {
                        $(this).parents("tr").remove();
                        isAllChecked();
                        getTotal();
                    }
                    var id = $(this).parents("tr").attr("data-id");
                    var { status, detail } = await deleteShoppingCarById({ id });
                    if (status) {

                    } else {
                        alert(detail);
                    }
                })

                $("#deleteAll").click(function () {

                    $(".check-one:checked").parents("tr").each(async function () {
                        $(this).remove();
                        var id = $(this).attr("data-id");
                        console.log(id);
                        var { status, detail } = await deleteShoppingCarById({ id });
                        if (status) {

                        } else {
                            alert(detail);
                        }
                    })
                    if ($(".check-one").length == 0) { $(".check-all").prop("checked", false) };
                    getTotal();

                })
            } else {
                $(".tableList").html(`暂无商品 <a style="color:#333" href='./goods.html'>采购商品</a>`);
            }
        }

        // 反选
        function isAllChecked() {
            var flag = $(".check-one").is(":not(:checked)")
            $(".check-all").prop("checked", !flag);
        }
        // 总计
        function getTotal() {
            var sum = 0;
            var allprice = 0;
            $(".check-one:checked").parents("tr").each(function () {
                var num = $(this).find(".count-input").val() * 1;
                var uPrice = $(this).find(".subtotal").text() * 1;
                sum += num;
                allprice += uPrice;
                // console.log(sum, allprice);
                // console.log(uPrice);
            })
            $("#selectedTotal").text(sum);
            $("#priceTotal").text(allprice.toFixed(2));

        }


    })
</script>

</html>